<template>
  <Model-bg title="环保数据" :width="467" :height="293" padding="10px">
    <div
      id="environmentImg"
      ref="environmentRef"
      class="environment-img"
      @click="handlePlay"
    />
  </Model-bg>
</template>
<script>
import { screenEnvironment } from "@/api/srceen/home";
export default {
  data() {
    return {
      isFull: false, // 是否全屏
    };
  },
  mounted() {
    this.getData();
    document.addEventListener("fullscreenchange", this.handleKeyDown);
  },
  beforeUnmount() {
    window.removeEventListener("fullscreenchange", this.handleKeyDown);
  },
  methods: {
    // 获取环保数据
    getData() {
      screenEnvironment().then((res) => {
        if (res.data) {
          // 需要开启vpn
          const img = document.createElement("img");
          img.src = res.data;
          img.style.width = "100%";
          img.style.height = "100%";
          this.$refs.environmentRef.appendChild(img);
        }
      });
    },
    // 全屏播放
    handlePlay() {
      if (this.isFull) return;
      const video = document.getElementById("environmentImg");
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.msRequestFullscreen) {
        video.msRequestFullscreen();
      }
    },
    // 监听全屏
    handleKeyDown() {
      const isFullScreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;
      this.isFull = isFullScreen ? true : false;
    },
  },
};
</script>
<style lang="scss" scoped>
.environment-img {
  width: 100%;
  height: calc(100% - 4px);
  color: #fff;
}
</style>
